<template>
    <div>
        <m-table :columns="columns" :data="data" :title="$route.meta?.title">
            <template #button>
                <a-button type="primary" size="small" @click="handleAdd">新增</a-button>
            </template>
            <template #type="record">
                <a-tag :color="record.type === enumType.EMAIL ? 'blue' : record.type === enumType.SMS ? 'green' : 'purple'">
                    {{ record.type === enumType.EMAIL ? '邮件' : record.type === enumType.SMS ? '短信' : '内部消息' }}
                </a-tag>
            </template>
            <template #event="record">
                {{ systemEvents.find(e => e.value === record.event)?.label || record.event }}
            </template>
            <template #status="record">
                <a-tag :color="record.status === 1 ? 'green' : 'red'">
                    {{ record.status === 1 ? '启用' : '禁用' }}
                </a-tag>
            </template>

            <template #action="{record}">
                <a-space>
                    <a-button size="small" >详情</a-button>
                </a-space>
            </template>
        </m-table>
    </div>
</template>

<script setup lang="ts">

// 通知类型
const enumType = {
    EMAIL: 1,
    SMS: 2,
    INTERNAL_MESSAGE: 3,
}

// 系统事件列表
const systemEvents = [
    { value: 'user', label: '用户事件' },
    { value: 'order', label: '订单事件' },
    { value: 'payment', label: '支付事件' },
    { value: 'system', label: '系统事件' },
]

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
        width: 100,
    },
    {
        title: '通知名称',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '事件类型',
        dataIndex: 'event',
        key: 'event',
        width: 150,
    },
    {
        title: '通知类型',
        dataIndex: 'type',
        key: 'type',
        width: 100,
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        align: 'center',
    },{
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 100,
    }
]

const data = {
    lists: [
        {
            id: 1,
            type: enumType.EMAIL,
            title: '用户事件通知',
            status: 1,
            event: 'user'
        },
        {
            id: 2,
            type: enumType.SMS,
            title: '订单事件通知',
            status: 1,
            event: 'order'
        }
    ],
    total: 2,
    page: 1,
    pageSize: 10,
}

</script>
